import React, { useState, useEffect } from 'react';
import { Input, Button, message } from 'antd';

import styles from './index.less';
import { history } from 'umi';
import bg from '@/assets/images/Class.png';
import { ReactComponent as IconZH } from '@/assets/images/zh.svg';
import { ReactComponent as IconPwd } from '@/assets/images/psd.svg';
import api from '@/api';

const Login = () => {
  const [info, setInfo] = useState<any>({
    username: '',
    password: '',
  });
  const [loading, setLoading] = useState<boolean>(false);
  const handleChange = (type: string, value: any) => {
    const newInfo: any = {
      ...info,
    };
    newInfo[type] = value;
    setInfo(newInfo);
  };

  const login = () => {
    if (loading) return;
    setLoading(true);
    api.user
      .server_systemUser_login(info)
      .then(res => {
        const { token } = res;
        localStorage.setItem('token', token);
        localStorage.setItem('username', info.username);
        message.success('登录成功！');
        history.push('/note/integral');
      })
      .finally(() => {
        setLoading(false);
      });
  };
  return (
    <div className={styles.loginPage}>
      <div className={styles.left}>
        <img src={bg} alt="" className={styles.bg} />
      </div>
      <div className={styles.right}>
        <div className={styles.title}>PRACTICE</div>
        <div>
          <Input
            className={styles.formItem}
            prefix={<IconZH className={styles.iconAuth} />}
            placeholder="账户"
            value={info.username}
            onChange={e => handleChange('username', e.target.value)}
          ></Input>
        </div>
        <div>
          <Input
            className={styles.formItem}
            prefix={<IconPwd className={styles.iconAuth} />}
            placeholder="密码"
            value={info.password}
            type="password"
            onChange={e => handleChange('password', e.target.value)}
          ></Input>
        </div>
        <div>
          <Button
            type="primary"
            className={styles.formButton}
            onClick={login}
            loading={loading}
          >
            登录
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Login;
